<template>
    <!-- 右侧布局组件，因为都是左右布局，右边有上下布局的样子，就可以抽离成公共的组件 -->
    <div class="layout-container">
        <div class="left-side-inner">
            <slot name="left-content"></slot>
        </div>
        <div class="right-content">
            <slot name="right-content"></slot>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.layout-container {
    display: flex;

    .left-side-inner {
        width: 250px;
        background: #e6e5e5;
        border-color: #ddd;
        border-style: solid;
        border-width: 0 1px 0 0;
    }

    .right-content {
        flex: 1;
        height: calc(100vh - 2px);
        background: #f5f5f5;
        width: 100%;
    }
}
</style>
